<template>
  <div class="lottery-9" :class="activedClassName">
    <div class="lottery-9-prizes">
      <template v-for="(item, idx) in prizesList" :key="idx">
        <div :class="`prize-item prize-${idx}`">
          <img class="prize-logo" :src="item[prizeIcon]" alt="" />
          <p class="prize-desc">{{ item[prizeName] }}</p>
          <img class="prize-actived" :src="activedImage" />
        </div>
      </template>
      <div class="draw-btn" @click="onStartClick">
        <img :src="startImage" />
      </div>
    </div>
    <van-loading class="lottery-9-loading" v-if="loading" color="#1989fa" />
  </div>
</template>

<script>
import { Loading } from 'vant';
import useLottery from './lottery';
import { computed } from '@vue/reactivity';

export default {
  props: {
    // 加载状态
    loading: { type: Boolean, default: false },
    // actived -- 激活状态
    activedImage: {
      type: String,
      default: require('../../assets/award_active.png').default
    },
    // start -- 开始按钮
    startImage: {
      type: String,
      default: require('../../assets/lottery-btn.png').default
    },
    // none -- 没有奖品
    noneImage: {
      type: String,
      default: require('../../assets/not_award.png').default
    },
    // 抽奖奖品数据,超过8个只取前8个
    prizes: { type: Array, default: () => [] },
    // 预设圈数，在这个基础上会叠加中奖奖品的半圈
    loop: { type: Number, default: 5 },
    // 开始和结束时的动画间隔, crossX > lowest时，慢开始、慢结束
    crossX: { type: Number, default: 100 },
    // 中间部分的动画间隔
    lowest: { type: Number, default: 60 },
    // 用于构建抽奖数组，如此项填了，调用start时必须考虑默认计算奖品位置函数是否合适
    // buildLottery: { type: Function },
    // 奖品构建函数
    build: { type: Function },
    // // 开始抽奖函数,接收一个start函数,start(id[奖品id], callback(prizes, id))
    // onStart: { type: Function },
    // 排序
    // sortPrizes: { type: Function },
    // 商品图标字段名
    prizeIcon: { type: String, default: 'logo' },
    // 商品名称字段名
    prizeName: { type: String, default: 'name' },
    // 商品ID字段名
    prizeID: { type: String, default: 'id' },
    // 商品顺序
    prizeOrder: { type: Array, default: () => [] }
  },
  setup(props, { emit }) {
    const [activedClassName, lottery] = useLottery({
      loop: props.loop,
      crossX: props.crossX,
      lowest: props.lowest,
      len: 8
    });
    function buildNothing() {
      const _ = {};
      _[props.prizeIcon] = props.noneImage;
      _[props.prizeName] = '再接再厉';
      _[props.prizeID] = 'none';
      return _;
    }
    const prizesList = computed(() => {
      let { prizes, prizeOrder, prizeID } = props;
      const arr = [];
      if (prizeOrder.length) {
        // 商品关键id对应的map
        const _map = prizes.reduce((_, item) => {
          const key = item[prizeID];
          _[key] = item;
          return _;
        }, {});
        prizeOrder.reduce((total, order) => {
          const prize = _map[order] || buildNothing();
          total.push({ ...prize });
          return total;
        }, arr);
      } else {
        for (let i = 0; i < 8; i++) {
          const prize = prizes[i] || buildNothing();
          arr.push(prize);
        }
        arr.sort(() => 0.4 - Math.random());
      }
      // 更新到lottery的内部奖品数组
      lottery.update(arr);
      return arr;
      // const build = props.build || lottery.build;
      // return build(props.prizes, props.buildLottery, props.noneImage, {
      //   sort: props.sortPrizes,
      //   update: lottery.update
      // });
    });

    const onStartClick = () => {
      // 开始处理函数包装，简化普通使用
      const startHandler = (id, options) =>
        lottery.start(id, {
          findName: props.prizeID,
          ...options
        });
      emit('start', startHandler);
      // props.onStart && props.onStart(lottery.start);
    };
    return {
      prizesList,
      onStartClick,
      activedClassName
    };
  },
  components: {
    [Loading.name]: Loading
  }
};
</script>

<style scoped lang="scss">
.lottery-9 {
  position: relative;
  // width: 640px; //移动端
  // height: 840px;
  // padding-top: 150px;

  width: 340px;
  height: 440px;
  padding-top: 100px;
  background: url('../../assets/nine-bg.png') no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
  box-sizing: border-box;
  .lottery-9-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #1989fa;
    background: rgba(255, 255, 255, 0.7);
    &::after {
      content: '';
      width: 0;
      height: 100%;
      display: inline-block;
      vertical-align: middle;
    }
  }
  .lottery-9-prizes {
    // width: 600px; //移动端
    // height: 600px;
    width: 300px;
    height: 300px;
    margin: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    .prize-item {
      position: relative;
      width: 31%;
      height: 31%;
      background: #fff;
      text-align: center;
      border-radius: 6px;
      box-shadow: 2px 2px 2px 2px #eaeaea;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .prize-logo {
        // height: 75px;
        height: 45px;
        margin: 15px auto 0;
        object-fit: cover;
      }
      .prize-desc {
        width: 100%;
        // font-size: 18px;
        font-size: 6px;
        color: #7e3e3f;
        //保留两行
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        line-height: 1.2;
        -webkit-box-orient: vertical;
      }
      .prize-actived {
        position: absolute;
        top: 2px;
        left: 2px;
        display: none;
        width: 100%;
        height: 100%;
        // box-shadow: inset 0 0 5px 5px #ff6d00;
      }
    }
    .draw-btn {
      order: 1;
      width: 31%;
      height: 31%;
      transform: scale(1.2);
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    @for $ii from 4 through 7 {
      .prize-#{$ii} {
        order: 2;
      }
    }
  }
  @for $i from 0 through 8 {
    &.actived-#{$i} {
      .lottery-9-prizes .prize-#{$i} .prize-actived {
        display: block;
      }
    }
  }
}
</style>
